<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯布局</title>
		<!-- 
		 需求：
		 1. 两边固定，中间自适应
		 2. 中间列要完整显示
		 3. 中间列要优先加载
		 
		 过程：
		 1. 开启浮动，搭建完整的布局框架
		 2. margin为负值，调整旁边两列的位置(使三列布局到一行上)
		 3. 使用相对定位，调整旁边两列的位置(使两列位置调整到两头)
		 -->
		
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			/**
			 * 解决高度塌陷
			 */
			.clearfix:before,
			.clearfix:after{
				content: "";
				display: table;
				clear: both;
			}
			.clearfix{
				zoom: 1;
			}
			
			body{
				padding: 10px;
				/* 最小2*left + right */
				min-width: 600px;
			}
			.header,.footer{
				height: 100px;
				background-color: #444444;
			}
			.content{
				margin: 10px 0px;
				padding: 0px 200px;
				/* 内容裁剪，伪等高 */
				overflow: hidden;
			}
			/* 伪等高 */
			.content .left,.content .middle,.content .right{
				padding-bottom: 10000px;
				margin-bottom: -10000px;
			}
			/* 两边固定 */
			.content .left{
				/* 使用相对定位，调整旁边两列的位置 */
				position: relative;
				left: -200px;
				float: left;
				width: 200px;
				background-color: #BBFFAA;
				/* margin-left为负值(margin只调整边界，不改变元素位置?)*/
				margin-left: -100%;
			}
			.content .right{
				/* 使用相对定位，调整旁边两列的位置 */
				position: relative;
				right: -200px;
				/* margin-left为负值(margin只调整边界，不改变元素位置?)*/
				margin-left: -200px;
				float: left;
				width: 200px;
				background-color: #BBFFAA;
			}
			.content .middle{
				float: left;
				width: 100%;
				background-color: yellowgreen;
			}
			
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="content clearfix">
			<div class="middle">
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
				middle<br />
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer"></div>
	</body>
</html>
